<template>
	<view class="main" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<!-- <image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<hx-navbar title="交易记录" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
<!--    联调后取消下面的注释-->
<!--    <view class="trade_info">-->
<!--      <view class="trade_info_left" :style="{'background-color':  ktabbarBgColor, 'border': '1px solid' + kselectColorSize}">-->
<!--        <view class="trade_tip" :style="'color:' + knavTitleColor">最新成交价</view>-->
<!--        <view class="trade_price" :style="{'color': kselectColorSize}">￥150</view>-->
<!--      </view>-->
<!--      <view class="trade_info_right">-->
<!--        <view class="trade_item">-->
<!--          <view class="trade_label" :style="'color:' + knavTitleColor">今日最高</view>-->
<!--          <text class="trade_content" style="color: red;">￥22000</text>-->
<!--        </view>-->
<!--        <view class="trade_item">-->
<!--          <view class="trade_label" :style="'color:' + knavTitleColor">今日最低</view>-->
<!--          <text class="trade_content" style="color: #39DA10;">￥1</text>-->
<!--        </view>-->
<!--        <view class="trade_item">-->
<!--          <view class="trade_label" :style="'color:' + knavTitleColor">今日成交量</view>-->
<!--          <text class="trade_content" :style="'color:' + knavTitleColor">748</text>-->
<!--        </view>-->
<!--        <view class="trade_item">-->
<!--          <view class="trade_label" :style="'color:' + knavTitleColor">地板价</view>-->
<!--          <text class="trade_content" :style="'color:' + knavTitleColor">￥8.8</text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
		<u-cell-group v-if="recordList.length" :border="false">
			<u-cell-item v-for="(item, index) in recordList" :key="index" :class="ktheme == 'black' ? 'infoBaseBox' : 'infoBaseBox_white'" :border="false"
                   :arrow="false"
                   :title="'#'+item.tokenId" :label="'成交时间：  ' + timeFormat(item.soldTime)" :value="item.price|fp_m"
				   :value-style="ktheme == 'black' ? 'color: #ffffff' : 'color: #000000'"
				>

			</u-cell-item>
		</u-cell-group>
		<view v-if="!recordList.length">
			<u-empty>
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [],
				recordQuery: {
					iid: '',
					pageNo: 1,
				},
				recordFinish: false,
			}
		},
		onLoad(option) {
			this.recordQuery.iid = option.iid;
			this.listInviteRecord();
		},
		onPullDownRefresh() {
			this.recordList = [];
			this.recordQuery.pageNo = 1;
			this.recordFinish = false;
			this.listInviteRecord();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.recordFinish) {
				return;
			}
			this.recordQuery.pageNo++;
			this.listInviteRecord();
		},
		methods: {
			listInviteRecord() {
				this.$api.marketSaleLog(this.recordQuery, res => {
					let data = res.data;
					if (!data.length) {
						this.recordFinish = true;
						return;
					}
					this.recordList = [...this.recordList, ...data];
				})
			},
			timeFormat(time, format) {
				return uni.$u.timeFormat(parseInt(time), format || 'yyyy-mm-dd hh:MM:ss');
			}
		}
	}
</script>

<style lang="scss">
	.main {
    //margin:0 30rpx 50rpx 30rpx;


		.infoBaseBox {
      background-color: #000000 !important;
      color: rgba(164, 191, 92, 1) !important;
      padding: 40rpx;
    }
    .infoBaseBox_white {
      background-color: #FFF;
      border-radius: 30rpx;
      padding: 40rpx;
    }
    .u-cell-item-box {
      background: #000000 !important;
    }

    .trade_info {
      display: flex;
      padding: 44rpx;
      &_left {
        padding-top: 64rpx;
        width: 280rpx;
        height: 280rpx;
        border-radius: 20rpx;
        margin-right: 35rpx;
      }
      .trade_tip {
        text-align: center;
        height: 42rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        line-height: 42rpx;
        font-style: normal;
        margin-bottom: 20rpx;
      }
      .trade_price {
        height: 90rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 64rpx;
        line-height: 90rpx;
        text-align: center;
        font-style: normal;
      }
      .trade_info_right {
        padding-top: 20rpx;
        .trade_item {
          display: flex;
          margin-bottom: 25rpx;
        }
        .trade_label {
          width: 140rpx;
          text-align: left;
        }
        .trade_content {
          margin-left: 40rpx;
        }
      }
    }
	}
</style>
